$(document).on("pagecreate", function(event) {
	var canvas = $("canvas");
	if (canvas.length == 1) {
		clock(canvas[0]);
	}
});

function clock(canvas) {
	var now = new Date();
	var center = centerPoint(canvas);
	var radius = Math.min(center.x, center.y);
	var context = canvas.getContext('2d');
	context.clearRect(0, 0, canvas.width, canvas.height);

	context.save();

	// outer circle
	context.strokeStyle = "white";
	context.lineWidth = radius * 0.05;
	context.shadowBlur = radius * 0.05;
	context.shadowColor="rgb(42,42,42)";
	context.beginPath();
	context.arc(center.x, center.y, radius * 0.95, 0, 2 * Math.PI);
	context.stroke();

	context.restore();
	context.save();

	// inner rainbow circle
	var d = Math.PI / 180;
	for (var i = 0; i < 360; ++i) {
		context.beginPath();
		context.moveTo(center.x, center.y);
		context.arc(center.x, center.y, radius * 0.95, d * i, d * (i + 2));
		context.closePath();
		context.fillStyle = "hsl(" + i + ",100%,50%)";
		context.fill();
	}

	context.restore();
	context.save();

	// numbers on clock
	context.fillStyle = "white";
	var size = radius * 0.15;
	context.font="bold " + size + "px cursive";
	context.textAlign = 'center';
	context.textBaseline = 'middle';
	context.shadowBlur = radius * 0.05;
	context.shadowColor="black";
	for (var i = 1; i <= 12; ++i) {
		var point = polarPoint(center, radius * 0.8, Math.PI * (i / 6 - 0.5));
		context.fillText(i, point.x, point.y);
	}

	// Date string
	context.font="bold " + size * 0.7 + "px monospace";
	curveText(context, now.toLocaleDateString(), center, radius * 0.6, - Math.PI / 2, false);
	curveText(context, now.toLocaleTimeString(), center, radius * 0.6, Math.PI / 2, true);

	context.restore();
	context.save();

	context.lineCap = "round";
	context.strokeStyle = "white";
	context.shadowColor="black";
	context.shadowBlur = radius * 0.05;
	context.shadowOffsetX = radius * 0.03;
	context.shadowOffsetY = radius * 0.03;

	// Hour
	point = polarPoint(center, radius * 0.45, Math.PI * (now.getHours() / 6 - 0.5));
	context.beginPath();
	context.moveTo(center.x, center.y);
	context.lineWidth = radius / 30;
	context.lineTo(point.x, point.y);
	context.closePath();
	context.stroke();

	// Minute
	point = polarPoint(center, radius * 0.6, Math.PI * (now.getMinutes() / 30 - 0.5));
	context.beginPath();
	context.moveTo(center.x, center.y);
	context.lineWidth = radius / 50;
	context.lineTo(point.x, point.y);
	context.closePath();
	context.stroke();

	// Second
	point = polarPoint(center, radius * 0.7, Math.PI * (now.getSeconds() / 30 - 0.5));
	context.beginPath();
	context.moveTo(center.x, center.y);
	context.lineWidth = radius / 80;
	context.lineTo(point.x, point.y);
	context.closePath();
	context.stroke();

	context.restore();

	window.setTimeout(clock, 1000, canvas);
}

function upload(link) {
	$(link).hide('slow');
	var url = $("#clock")[0].toDataURL();
	var name = "clock-" + (new Date()) + ".png";
	$.post("/UtilityServlet", {
		name : name,
		data : url
	}).done(function() {
		$("#popupMessage").html("The image is uploaded. Go to <a href='/email/send.xhtml'>Email</a> ro send the mail.");
		$("#popupMessage").popup("open");
	}).fail(function() {
		$("#popupMessage").text("Could not upload the image.");
		$("#popupMessage").popup("open");
	}).always(function() {
		$(link).show('fast');
	});
}

function save(link) {
	$(link).attr("href", $("#clock")[0].toDataURL());
	$(link).attr("download", "clock-" + (new Date()) + ".png");
}

function Point(x, y) {
	this.x = x;
	this.y = y;
}

function centerPoint(canvas) {
	var point = new Point();
	point.x = canvas.width / 2;
	point.y = canvas.height / 2;
	return point;
}

function polarPoint(center, r, t) {
	var point = new Point(center.x, center.y);
	point.x += r * Math.cos(t);
	point.y += r * Math.sin(t);
	return point;
}

function curveText(context, text, center, radius, offsetAngle, topTowordsCenter) {
	for (var i = 0; i < text.length; ++i) {
		var width = context.measureText(text.substring(0, i + 1)).width
				- context.measureText(text).width / 2;
		var angle =  width / radius;
		angle =  topTowordsCenter ? offsetAngle - angle : offsetAngle + angle;
		var point = polarPoint(center, radius, angle);
		context.save();
		context.translate(point.x, point.y);
		angle = topTowordsCenter ? angle - Math.PI / 2 : angle + Math.PI / 2;
		context.rotate(angle);
		context.fillText(text[i], 0, 0);
		context.restore();
	}
}
